<template>
    <p style="font-size: 20px;font-weight: 400;margin-bottom: 10px;">{{ $t('menu.creationCategory') }}</p>

    <!-- 头部按钮 -->
    <div class="search-box">
        <div class="flex">
            <span style="width: 140px;">作品名称:</span>
            <el-input v-model="search.searchName" clearable></el-input>
        </div>
        <div class="flex">
            <span style="width: 140px;">评论用户:</span>
            <el-input v-model="search.searchName" clearable></el-input>
        </div>
        <el-button type="primary" @click="searchChange">{{ $t('data.search') }}</el-button>

    </div>

    <!-- 表格 -->

    <el-table :data="datas" stripe border style="height: 580px">
        <el-table-column prop="name" :label="$t('common.name')" align="center" />
        <el-table-column prop="userName" label="评论用户" align="center" />
        <el-table-column label="评论时间" align="center">
            <template #default="scope">
                {{ scope.row.createTime.substring(0, 19).replace('T', ' ') }}
            </template>
        </el-table-column>
        <el-table-column label="评论内容" align="center">
            <template #default="scope">
                <el-input type="textarea" v-model="scope.row.message" disabled></el-input>
            </template>
        </el-table-column>

        <el-table-column fixed="right" :label="$t('column.operations')" align="center">
            <template #default="scope">
                <el-button type="primary" link @click=""><a :href="'http://localhost:14652/photo/' + scope.row.photoId"
                        target="_blank">查看作品</a></el-button>

                <el-button type="primary" link @click="messageShow(scope.row.message)">查看评论</el-button>
                <el-popconfirm title="是否删除?" @confirm="delConfirm(scope.row.id)">
                    <template #reference>
                        <el-button type="danger" size="small">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>

            </template>
        </el-table-column>


    </el-table>


    <el-dialog v-model="dialogVisible" title="评论内容" width="500">
        <span>{{ data }}</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>



    <el-pagination style="padding-top: 30px;" background layout="total, sizes, prev, pager, next, jumper"
        :total="search.total" :page-sizes="[10, 30, 50, 100]" v-model:current-page="search.index"
        v-model:page-size="search.size" @size-change="pageChange" @current-change="currentChange" />
</template>


<script setup>
import { ref } from 'vue'
import api from './api'
import { ElMessage } from 'element-plus';

const datas = ref([])
const dialogVisible = ref(false)
const data = ref()

const delConfirm = (id) => {
    api.delCategory(id).then(res => {
        if (res.success) {
            datas.value = datas.value.filter(x => x.id != id)
            ElMessage({ type: 'success', message: res.message })
        }
    })
}

const messageShow = (message) => {
    data.value = message
    dialogVisible.value = true
}


const search = ref({
    total: 0,
    index: 1,
    size: 10,
    searchName: '',
    searchValue1: ''
})

const getComments = () => {
    api.getComments(search.value).then(res => {
        datas.value = res.datas
        search.value.total = res.total
        console.log(datas.value)
        console.log(search.value.total)
    })
}
getComments()

const searchChange = () => {
    getComments()
}

const pageChange = (value) => {
    search.value.size = value
    getComments()
}

const currentChange = (value) => {
    search.value.index = value
    getComments()
}
</script>


<style lang="scss">
.search-box {
    .flex {
        display: flex;
        justify-content: space-between;
        width: 280px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px
    }
}
</style>